<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理系统</title>
    <script src="../../js/lib/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="../../js/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script src="../../js/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../../css/backstage.css">
    <script src="../../js/util/storageUtils.js"></script>
    <script src="../../js/constant/constants.js"></script>
    <script src="../../js/lib/axios.js"></script>
    <script src="../../js/util/security.js"></script>
    <script src="../../js/common/backstage.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="./device_list.html">识途后台系统</a>
        </div>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="../../index.html"><span class="glyphicon glyphicon-repeat"></span> 返回前台</a></li>
            <li><a id="logout"><span class="glyphicon glyphicon-log-in"></span> 登出</a></li>
        </ul>
    </div>
</nav>

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="list-group">
                <a href="device_list.html" class="list-group-item active">
                    <h4 class="list-group-item-heading">
                        设备信息
                    </h4>
                </a>
                <a href="device_list.html" class="list-group-item">
                    <h4 class="list-group-item-heading">
                        设备列表
                    </h4>
                    <p class="list-group-item-text">
                        您可以查看和添加你的设备。
                    </p>
                </a>
                <a href="./device_group_list.html" class="list-group-item">
                    <h4 class="list-group-item-heading">
                        设备分组
                    </h4>
                    <p class="list-group-item-text">
                        您可以对您的设备进行分组。
                    </p>
                </a>
                <a href="add_device.html" class="list-group-item">
                    <h4 class="list-group-item-heading">
                        新增设备
                    </h4>
                    <p class="list-group-item-text">
                        添加新的设备。
                    </p>
                </a>
                <a href="add_group.html" class="list-group-item">
                    <h4 class="list-group-item-heading active_choose">
                        新增分组
                    </h4>
                    <p class="list-group-item-text">
                        添加新的分组。
                    </p>
                </a>
            </div>

            <div class="list-group">
                <a href="../personal/personal_meg.html" class="list-group-item active">
                    <h4 class="list-group-item-heading">
                        隐私信息
                    </h4>
                </a>
                <a href="../personal/personal_meg.html" class="list-group-item ac">
                    <h4 class="list-group-item-heading">
                        个人信息
                    </h4>
                    <p class="list-group-item-text">
                        您个人注册的信息。
                    </p>
                </a>
                <a href="../personal/family_meg.html" class="list-group-item">
                    <h4 class="list-group-item-heading">
                        家人信息
                    </h4>
                    <p class="list-group-item-text">
                        您创建的家人账号信息。
                    </p>
                </a>
                <a href="../personal/add_family.html" class="list-group-item">
                    <h4 class="list-group-item-heading">
                        添加家人
                    </h4>
                    <p class="list-group-item-text">
                        新建与你关联的家人账号。
                    </p>
                </a>
                <a href="../personal/about_system.html" class="list-group-item">
                    <h4 class="list-group-item-heading">
                        关于系统
                    </h4>
                    <p class="list-group-item-text">
                        关于这个系统的来源。
                    </p>
                </a>
            </div>
        </div>
        <div class="col-md-8">
            <div class="device_block">
                <div class="panel panel-default">
                    <div class="panel-body">
                        添加分组
                    </div>
                </div>
                <form class="form-horizontal" role="form" onsubmit="return false">
                    <div class="form-group">
                        <label for="groupName" class="col-sm-2 control-label">分组名</label>
                        <div class="col-sm-10" style="width: 300px">
                            <input type="text" class="form-control" id="groupName" placeholder="请输入分组名" maxlength="10">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="description" class="col-sm-2 control-label">分组描述</label>
                        <div class="col-sm-10" style="width: 300px">
                            <input type="text" class="form-control" id="description" placeholder="请输入分组描述" maxlength="20">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">所有设备</label>
                        <div class="col-sm-10" id="equipCheckbox" style="width: 300px">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" id="showed">主页中展示本组设备
                                </label>
                                &nbsp;&nbsp;
                                <label>
                                    <input type="checkbox" id="locked">禁用本组全部设备
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-default" id="saveBtn">添加</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="../../js/backstage/device/add_group.js"></script>
<!--<script>-->
<!--    // 查询全部的设备名字-->
<!--    const getEquipmentsNames = () => {-->
<!--        axios({-->
<!--            method: "get",-->
<!--            url: '/equipment/names',-->
<!--            headers: {'Authorization': getToken()},-->
<!--        }).then(resp => {-->
<!--            if (!resp.data.success) return-->
<!--            let equipments = resp.data.data;-->
<!--            let html = ''-->
<!--            equipments.forEach(equipment => {-->
<!--                html += '<div class="checkbox">'-->
<!--                html += '<label>'-->
<!--                html += `<input type="checkbox" class="equipmentNames" value="${equipment.eid}">`-->
<!--                html += equipment.equipName-->
<!--                html += '</label>'-->
<!--                html += '</div>'-->
<!--            })-->
<!--            $('#equipCheckbox').html(html)-->
<!--        })-->
<!--    }-->
<!--    getEquipmentsNames()-->

<!--    $('#saveBtn').click(() => {-->
<!--        let groupName = $('#groupName').val()-->
<!--        if (groupName === null || groupName === '') {-->
<!--            alert("分组名不能为空")-->
<!--            return-->
<!--        }-->
<!--        let ids = []-->
<!--        $('#equipCheckbox input:checked').each(function () {-->
<!--            ids.push($(this).val())-->
<!--        })-->
<!--        let data = {-->
<!--            groupName: groupName,-->
<!--            description: $("#description").val(),-->
<!--            equipmentIds: ids,-->
<!--            equipmentsShowed: $("#showed").prop('checked'),-->
<!--            equipmentsLocked: $('#locked').prop('checked')-->
<!--        }-->

<!--        axios({-->
<!--            method: "post",-->
<!--            url: '/equipGroup',-->
<!--            headers: {'Authorization': getToken()},-->
<!--            data: data-->
<!--        }).then(resp => {-->
<!--            if (resp.data.success) {-->
<!--                location.href = '/backstage/device/device_group_list.html'-->
<!--            } else {-->
<!--                alert("系统繁忙，请稍后重试")-->
<!--            }-->
<!--        })-->
<!--    })-->
<!--</script>-->

</body>
</html>